<template>
	<div class="index flex flexv">
		<!-- 头部 -->
		<div class="top_box">
			<div class="top flex">
				<div class="left_address oneline">南昌</div>
				 <router-link to="/search" class="right_search flex1">
				请输入搜索关键字
				</router-link>
			</div>
		</div>

		<!-- 栏目 -->
		<div class="item_box">
			<tabs v-model="active" color="#50AD22" title-inactive-color="#212121" title-active-color="#333" :line-height="2"
			 :swipe-threshold="5" scrollspy :ellipsis="false" @click="changeType" class="items">
				<tab :title="item.name" :name="item.id" v-for="(item,index) in head_cates" :key="index"></tab>
			</tabs>
		</div>

		<!-- 轮播图 -->
		<div class="swiper_box flex" v-if="homeindex == 0">
			<van-swipe class="swiper" :show-indicators="true" indicator-color="#FEA382" :autoplay="3000" :loop="true">
				<van-swipe-item class="flex" v-for="(item,index) in banners" :key="index" @click="toGoods(item)">
					<img :src="item.image" alt="">
				</van-swipe-item>
			</van-swipe>
		</div>

		<!-- 分类栏目 -->
		<div class="types flex-wrap" v-if="homeindex == 0">
			<div class="type flexv ali-c" v-for="(item,index) in cates" :key="index" @click="toCate(item)">
				<img class="ico" :src="item.image" alt="">
				<p class="name tc">{{item.name}}</p>
			</div>
		</div>

		<!-- 好物推荐 -->
		<div class="bests flexv" :class="homeindex == 0 ? 'mt2' : ''" v-if="best.length > 0 && homeindex == 0">
			<div class="bests_head jus-b">
				<div class="bests_head_left flex">
					<img src="@/assets/a_title_hwtj.png" alt="">
					<span>尽享好物</span>
				</div>

				<div class="more" @click="moreGoods">更多></div>
			</div>

			<!-- 商品 -->
			
			<div style="overflow-x: scroll;overflow-y: hidden;display: -webkit-box;<strong></strong>">
				<div class="bests_goods flex best-more" v-if="best.length > 0">
				    <div class="bests_good flexv  best-more-1" v-for="(item,index) in best" :key="index" @click="toGoodDetail(item)">
				        <img :src="item.image" class="goods_img" alt="">
				        <p class="twoline title">{{item.goods_name}}</p>
				
				        <div class="bottoms jus-b">
				            <span class="price">￥{{parseFloat(item.goods_price)}}</span>
				            <span class="buy tc white">抢购</span>
				        </div>
				    </div>
				</div>
			</div>
			
		</div>
		
		<!-- 分享有礼 -->
		<!-- <img  v-if="homeindex == 0 && infos.share_image" :src="infos.share_image" class="share" alt=""> -->

		<!-- 拼团中心 -->
		<div class="groups flexv" v-if="homeindex == 0 && groups.length > 0">
			<!-- 头部 -->
			<div class="bests_head jus-b">
				<div class="bests_head_left flex">
					<img src="@/assets/a_title_mzzq.png" alt="">
				</div>

				<div class="more" @click="goCollageList">更多></div>
			</div>

			<!-- 拼团商品列表 -->
			<div class="group-lists flexv">
				<div class="group-list flex" v-for="(item,index) in groups" :key="index" @click="toPintuan(item,1)">
					<div class="group-img flex">
						<img :src="item.image" alt="">
					</div>
					<div class="flex1 goods-infos flexv jus-b">
						<p class="twoline goods_title">{{item.goods_name}}</p>
						<div class="group-info flex">
							<span class="type white">{{item.group_num}}人团</span>
							<span class="sales">已团 {{item.group_nums}}</span>
						</div>
						<div class="goods-fix jus-b">
							<p class="price ali-b">￥{{item.goods_price}}<span>￥{{item.line_price}}</span></p>
							<div class="btn tc white">去开团</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 限时抢购 -->
		<div class="bests seckill flexv mt2" v-if="homeindex == 0 && seckill.length > 0">
			<div class="bests_head jus-b">
				<div class="bests_head_left flex">
					<img src="@/assets/a_title_xsqg.png" alt="">
					<div class="cut-down ali-c">
						<span>距结束</span>
						<span class="time">{{times.d}}</span>
						<span>天</span>
						<span class="time">{{times.h}}</span>
						<span>:</span>
						<span class="time">{{times.m}}</span>
						<span>:</span>
						<span class="time">{{times.s}}</span>
					</div>
				</div>

				<div class="more" @click="toBuy">更多></div>
			</div>

			<!-- 商品 -->
			<div style="overflow-x: scroll;overflow-y: hidden;display: -webkit-box;<strong></strong>">
				<div class="bests_goods flex best-more" v-if="seckill.length > 0">
				    <div class="bests_good flexv  best-more-1" v-for="(item,index) in seckill" :key="index" @click="toPintuan(item,2)">
				        <img :src="item.image" class="goods_img" alt="">
				        <p class="twoline title">{{item.goods_name}}</p>
				
				        <div class="bottoms jus-b">
				            <span class="price">￥{{parseFloat(item.goods_price)}}<span style="color: #999;margin-left: 0.12rem;font-size: 0.22rem;text-decoration: line-through;">￥{{parseFloat(item.line_price)}}</span></span>
				            <span class="buy tc white">抢购</span>
				        </div>
				    </div>
				</div>
			</div>
		</div>

		<!-- 当季热卖 -->
		<div class="hot_title flexc" v-if="homeindex == 0">
			<img src="@/assets/a_best_sellers.png" alt="">
		</div>
		<!-- 热卖商品 -->
		<van-list v-model="loading" :finished-text="finishedText" :immediate-check="false" :finished="finished" @load="getHots" v-if="homeindex == 0">
			<div  class="goods_lists flex-wrap">
				<div class="goods-list flexv" @click="toDetail(item)" v-for="(item,index) in hots" :key="index">
					<div class="goods-img flex">
						<img v-lazy="item.image" :src="item.image" class="goods_img" alt="">
					</div>
					<div class="goods-info flexv jus-b flex1">
						<p class="twoline title">{{item.goods_name}}</p>
						<div class="goods-fix jus-b ali-c">
							<span class="ali-b price">￥{{item.goods_price}}<span>起</span></span>
							<span class="sales tc" v-if="item.return_price>=0">分享赚￥{{item.return_price}}</span>
						</div>
					</div>
				</div>
			</div>
		</van-list>

		<!-- 分类商品 -->
		<van-list v-model="loading" :finished-text="finishedText" :finished="finished" @load="getBestgoods" v-if="homeindex != 0 && !isNone">
			<div class="goods_lists flex-wrap">
				<div class="goods-list flexv" @click="toDetail(item)" v-for="(item,index) in list" :key="index">
					<div class="goods-img flex">
						<img v-lazy="item.image" :src="item.image" class="goods_img" alt="">
					</div>
					<div class="goods-info flexv jus-b flex1">
						<p class="twoline title">{{item.goods_name}}</p>
						<div class="goods-fix jus-b ali-c">
							<span class="ali-b price">￥{{parseFloat(item.goods_price)}}<span>起</span></span>
							<span class="sales tc" v-if="item.return_price>=0">分享赚￥{{parseFloat(item.return_price)}}</span>
						</div>
					</div>
				</div>
			</div>
		</van-list>

		<div class="empty_box flexv flexc" v-if="isNone">
			<img src="@/assets/empty-data.png" alt="">
			<p class="note tc">暂时没有相关商品哦~</p>
		</div>
		<div class="my-ad-window" v-if="ad_window">
			<van-popup v-model="showPost" style="background-color: transparent;">
				<div class="index-show">
					<img @click="toDetails(ad_window)" class="index-img-1" :src="ad_window.image" />
					<img @click="closePose" class="index-img-2" src="../../assets/c_close_icon.png" />
				</div>
			</van-popup>
		</div>
		

		<!-- 底部 -->
		<pubFoot index="index"></pubFoot>
	</div>
</template>

<script>
	import Vue from 'vue';
	import pubFoot from '@/components/foot';
	import {
		seckill_1
	} from '@/config/utils.js';
	import {
		Toast,
		Tab,
		Tabs,
		Swipe,
		SwipeItem,
		List,
		Popup
	} from 'vant';
	import {
		home,
		cateList,
		hotlist
	} from '@/request/api';
	Vue.use(Toast, Tab, Tabs, Swipe, SwipeItem, List,Popup)
	export default {
		data() {
			return {
				isNone: false, // 是否空列表
				loadNew: true, // 是否加载最新数据
				active: '999',
				homeindex: 0, // 是否展示全部数据
				type: '', // 栏目id
				// 列表相关
				list: [],
				page: 0,
				pagesize: 10,
				finished: false,
				loading: false,
				times: '',
				timmer: '', // 倒计时
				banners: [], // 轮播图
				cates: [], // 栏目
				head_cates: [], // 头部栏目
				hots: [], // 热卖
				best: [], // 好物
				groups: [], // 拼团
				seckill: [], // 抢购
				infos: '', // 首页设计院
				goodstype: 1, // 商品类型 1实物 2虚拟
				finishedText: '嘉瑞科技提供技术支持',
				ad_window:'',//首页弹出广告
				showPost:JSON.parse(sessionStorage.getItem('myPost')) == false ? JSON.parse(sessionStorage.getItem('myPost')) : true
			}
		},
		created() {
			// 是否去详情页
			let goods_id = sessionStorage.getItem('goods_id');
			let goods_type = sessionStorage.getItem('goods_type');
			let group_id = sessionStorage.getItem('group_id');
			let ID = sessionStorage.getItem('ID');
			let actId = sessionStorage.getItem('actId');
			let actType = sessionStorage.getItem('actType') ? sessionStorage.getItem('actType') : '';
			
			// 实物商品
			if (goods_id && goods_type == 0) {
				// 是否活动商品
				if(actId){
					// 拼团
					if(actType == 1){
						this.$router.push('/collage?id=' + actId + '&goods_id=' + goods_id  + '&groupbuy_id=1')
						return
					}else{
						// 秒杀
						this.$router.push('/collage?limit_discount_id=' + actId + '&goods_id='+goods_id)
						return
					}
				}else{
					this.$router.push('/goodsDetail?id=' + goods_id)
					return
				}
			}

			// 虚拟商品
			if(goods_id && goods_type != 0){
				// 是否活动商品
				if(actId){
					// 拼团
					if(actType == 1){
						this.$router.push('/collage?id=' + actId + '&goods_id=' + goods_id + '&groupbuy_id=1')
						return
					}else{
						// 秒杀
						this.$router.push('/detail?id=' + goods_id + '&type=' + goods_type + '&limit_discount_id='+ actId)
						return
					}
				}else{
					this.$router.push('/detail?id=' + goods_id + '&type=' + goods_type)
					return
				}
			}

			// 拼团
			if(group_id){
				this.$router.push('/collageIn?id=' + ID + '&goods_id=' + goods_id + '&group_id=' + group_id)
				return
			}
			
			this.$loading();
			this.getData();
			console.log(JSON.parse(sessionStorage.getItem('myPost')))
		},
		components: {
			pubFoot,
			Tab,
			Tabs,
			"van-swipe": Swipe,
			"van-swipe-item": SwipeItem,
			"van-list": List,
		},
		beforeUpdate(){
		},
		methods: {
			closePose(){
				this.showPost = false
				let myPost = false
				sessionStorage.setItem('myPost',myPost)
			},
			goCollageList(){
				this.$router.push('/collageList')
			},
			// 获取数据
			getData() {
				this.loading = true;
				home({
					token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
					page: 1,
					pagesize: 10
				}).then(res => {
					Toast.clear();
					this.loading = false;
					if (res.code == 1) {
						this.loadNew = false;
						this.infos = res.data;
						this.banners = res.data.banner;
						this.best = res.data.good_item;
						this.groups = res.data.group_item;
						this.seckill = res.data.limited_item;
						this.cates = res.data.cate;
						this.ad_window = res.data.ad_window
						this.cutDown(res.time,res.data.miao)
						res.data.head_cate.unshift({
							id: 999,
							name: '推荐'
						})
						this.head_cates = res.data.head_cate;
					}
				})

			},
			toPintuan(item,type){
				if(type==1)
				{
					if(item.limit_discount_id)
					{
						this.$router.push('/collage?limit_discount_id=' + item.limit_discount_id+'&goods_id='+item.goods_id)
					}else{
						this.$router.push('/collage?id=' + item.id+'&goods_id='+item.goods_id+'&groupbuy_id='+item.groupbuy_id)
					}
				}
				if(type==2){
					if(item.item_type==0){
						if(item.limit_discount_id)
						{
							this.$router.push('/collage?limit_discount_id=' + item.limit_discount_id+'&goods_id='+item.goods_id)
						}else{
							this.$router.push('/collage?id=' + item.id+'&goods_id='+item.goods_id+'&groupbuy_id='+item.groupbuy_id)
						}
					}else{
						this.$router.push('/detail?id=' + item.goods_id+'&type='+item.item_type+'&limit_discount_id='+item.limit_discount_id)
					}
				}
				
				
			},
			moreGoods(){
				this.$router.push('/best')
			},
			// 头部分类商品
			getBestgoods() {
				
				
				this.loading = true;
				cateList({
					token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
					page: ++this.page,
					pagesize: 10,
					cate_id: this.type,
					type: this.goodstype
				}).then(res => {
					Toast.clear();
					this.loading = false;
					if (res.code == 1) {
						this.finished = Number(res.data.length) >= 10 ? false : true;
						console.log(this.finished)
						if (res.data.length > 0) {
							this.list = [...this.list, ...res.data]
						}
						if (this.list.length < 1) {
							this.isNone = true
						} else {
							this.isNone = false;
						}
					}else{
						this.isNone = true;
						this.finished = true
					}
				})
			},
			// async getList(){
			// 	let {data,code,msg} = await cateList({
			// 		token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
			// 		page: ++this.page,
			// 		pagesize: this.pagesize,
			// 		cate_id: this.type,
			// 		type: this.goodstype
			// 	})
				
			// 	if(code==1)
			// 	{
			// 		Toast.clear()
			// 		if(data.length ===0)
			// 		{
			// 			this.finished = true
			// 		}
			// 		this.list = [...this.list,...data];
			// 		this.loading = false
			// 	}else{
			// 		Toast.clear()
			// 		this.$tip(msg)
			// 	}
			// },
			onLoad(){
				this.loading = true
				this.getHots()
			},
			// 获取当季热卖商品
			getHots() {
				hotlist({
					token: localStorage.getItem('token'),
					page: ++this.page,
					pagesize:this.pagesize
				}).then(res => {
					Toast.clear();
					if (res.code == 1) {
						
						if(res.data.hot_item.length ===0)
						{
							this.finished = true
						}
						if (res.data.hot_item.length > 0) {
							this.hots = [...this.hots, ...res.data.hot_item];
						}
						this.loading = false
					} else {
						this.loading = false
						this.finished = true
						if (res.msg == '请登录后操作') {
							this.$tip('您的登录已失效,即将重新登录!');
							setTimeout(() => {
								localStorage.clear();
								// sessionStorage.clear();
								window.location.href = 'http://mbgo.0791jr.com';
							}, 1200)
						}
					}
				})
			},
			// 改变栏目
			changeType(name, title) {
				if (name == 999) {
					this.homeindex = 0;
					this.isNone = false;
				} else {
					this.homeindex = 1;
					this.head_cates.forEach((item) => {
						if (item.id == this.active) {
							this.goodstype = item.type;
						}
					});
					this.$loading();
					this.type = this.active;
					// 重新加载数据
					this.list = [];
					this.page = 0;
					this.getBestgoods();
				}
			},
			// 去海报商品详情 item_type：0实物商品 1景点 2民宿  3跟团旅游  4美食休闲 
			toGoods(item) {
				// 实物商品
				if (item.item_type == 0) {
					if (item.url) {
						this.$router.push('/goodsDetail?id=' + item.url)
					}
				} else {
					// 虚拟商品
					if (item.url) {
						this.$router.push('/detail?id=' + item.url + '&type=' + item.item_type)
					}
				}
			},

			// 栏目跳转 type 1实物 2虚拟
			toCate(item) {
				this.$router.push('/classify?id=' + item.url + '&type=' + item.type + '&typeName=' + item.name)
			},
			toBuy(){
				this.$router.push('/buyList')
			},
			// 去商品详情
			toDetail(item) {
				
				if (item.item_type == 0) {
					this.$router.push('/goodsDetail?id=' + item.goods_id)
				} else {
					this.$router.push('/detail?id=' + item.goods_id + '&type=' + item.item_type)
				}
			},
			toGoodDetail(item) {
				if (item.item_type == 0) {
					this.$router.push('/goodsDetail?id=' + item.goods_id)
				} else {
					this.$router.push('/detail?id=' + item.goods_id + '&type=' + item.item_type)
				}
			},
			toDetails(item) {
				let myPost = false
				sessionStorage.setItem('myPost',myPost)
				if (item.item_type == 0) {
					this.$router.push('/goodsDetail?id=' + item.url)
				} else {
					this.$router.push('/detail?id=' + item.url + '&type=' + item.item_type)
				}
			},
			seckill_2(now,rest){
			    // let days = formatNumber(parseInt(rest / 60 / 60 / 24)),
			    //   hours = formatNumber(parseInt(rest / 60 / 60 % 24)),
			    //   minutes = formatNumber(parseInt(rest / 60 % 60)),
			    //   seconds = formatNumber(parseInt(rest % 60));
				let nowTime = new Date(now*1000);
				let endTime = new Date(rest*1000);
				let t = endTime.getTime() - nowTime.getTime();
				let days = Math.floor(t/1000/60/60/24);
				let hours = Math.floor(t/1000/60/60%24);
				let minutes = Math.floor(t/1000/60%60);
				let seconds = Math.floor(t/1000%60);
				if(days < 10){
					days = '0' + days;
				}
				if(hours < 10){
					hours = '0' + hours;
				}
				if(minutes < 10){
					minutes = '0' + minutes;
				}
				if(seconds < 10){
					seconds = '0' + seconds;
				}
			    return { d: days, h: hours, m: minutes, s: seconds }
			  },
			cutDown(now,time) {
					this.timmer = setInterval(() => {
						if (time >= 0) {
							this.times = this.seckill_2(now,time);
							time=time-1;
						} else {
							clearInterval(this.timmer);
						}
					}, 1000)
			},
		},
		beforeRouteLeave(to, from, next) {
			clearInterval(this.timmer);
			next()
		},
	}
</script>

<style lang="less" scoped>
	.index {
		min-height: 100vh;
		background-color: #f5f5f5;
		
		// 首页弹窗
		.index-show{
			background: none;
			width: 5.8rem;
			text-align: center;
			.index-img-1{
				width: 5.8rem;
				height: 9.2rem;
				img{
					width: 100%;
					height: 100%;
				}
				
			}
			.index-img-2{
				margin-top: 0.5rem;
				img{
					width: 0.4rem;
					height: 0.4rem;
				}
			}
		}
		// 头部
		.top_box {
			width: 100%;
			height: 0.88rem;

			.top {
				width: 100%;
				max-width: 750px;
				height: 0.88rem;
				margin: 0 auto;
				position: fixed;
				z-index: 100;
				top: 0;
				left: 0;
				right: 0;
				background-color: #fff;

				.left_address {
					width: 1.72rem;
					height: 0.88rem;
					padding-left: 0.64rem;
					font-size: 0.28rem;
					line-height: 0.88rem;
					color: #333;
					background: url('~@/assets/a_city_location.png') no-repeat 0.28rem center;
					background-size: 0.24rem 0.3rem;
				}

				.right_search {
					height: 0.56rem;
					margin: auto 0.28rem auto 0;
					padding: 0 0.64rem;
					border-radius: 0.28rem;
					font-size: 0.26rem;
					line-height: 0.56rem;
					color: #aaa;
					background: url('~@/assets/nav_search.png') no-repeat 0.34rem center #e9e9e9;
					background-size: 0.24rem 0.24rem;
				}
			}
		}

		// 精选栏目
		.item_box {
			width: 100%;
			height: 0.88rem;

			/deep/.items {
				width: 100%;
				height: 0.88rem;
				margin: 0 auto;
				position: fixed;
				z-index: 100;
				top: 0.88rem;
				left: 0;
				right: 0;
			}
		}

		// 轮播图
		.swiper_box {
			height: 3rem;
			padding-top: 0.1rem;
			background-color: #fff;

			.swiper {
				width: calc(100% - 0.56rem);
				height: 100%;
				margin: 0 auto;
				border-radius: 0.1rem;
				background-color: #fff;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 分类栏目
		.types {
			padding: 0 0 0.3rem;
			background-color: #fff;

			.type {
				width: 20%;
				margin: 0.3rem 0 0;

				.ico {
					max-width: 0.6rem;
					max-height: 0.54rem;
				}

				.name {
					margin-top: 0.2rem;
					font-size: 0.26rem;
					line-height: 120%;
					color: #333;
				}
			}
		}

		// 好物推荐
		.bests {
			padding: 0.3rem 0.28rem;
			background-color: #fff;
			overflow: scroll;
			-webkit-overflow-scrolling : touch;
			.bests_head {
				height: 0.3rem;

				.bests_head_left {
					padding-left: 0.1rem;
					border-left: 0.04rem solid #50AD22;
					font-size: 0.24rem;
					line-height: 0.3rem;
					color: #999;

					img {
						width: 1.3rem;
						height: 0.3rem;
					}

					span {
						margin-left: 0.2rem;
					}
				}

				.more {
					font-size: 0.24rem;
					line-height: 0.3rem;
					color: #666;
				}
			}

			.bests_goods {
				margin-top: 0.24rem;
				padding: 0.2rem;
				border-radius: 0.1rem;
				background-color: #D0F2BF;
				overflow-x: scroll;

				.bests_good {
					width: 2rem;
					padding-bottom: 0.2rem;
					border-radius: 0.1rem;
					background-color: #fff;
					position: relative;
					.goods_img {
						width: 2rem;
						height: 2rem;
						img {
							margin: auto;
							border-radius: 0.1rem;
						}
					}

					.title {
						margin-top: 0.1rem;
						padding: 0 0.08rem;
						font-size: 0.26rem;
						line-height: 150%;
						color: #333;
					}

					.bottoms {
						margin-top: 0.14rem;
						padding: 0 0.08rem;
						
						.price {
							font-size: 0.28rem;
							line-height: 120%;
							color: #ee1c1a;
						}

						.buy {
							position: absolute;
							bottom: 0.2rem;
							right: 0.2rem;
							width: 0.68rem;
							height: 0.32rem;
							font-size: 0.22rem;
							line-height: 0.32rem;
							background: linear-gradient(-30deg, rgba(238, 28, 26, 1), rgba(255, 90, 88, 1));
							border-radius: 0.16rem;
						}
					}
				}

				.bests_good_one {
					width: 1.8rem;

					.goods_img {
						width: 1.8rem;
						height: 2rem;
					}
				}

				.bests_good_two {

					// width: calc((100% - 0.3rem) / 2);
					.goods_img {
						width: 100%;
						height: 2rem;
					}
				}
			}
			.best-more{
				// width: 15rem;
				.best-more-1{
					margin-right: .2rem;
					width: 2.5rem;
					padding: 0.15rem;
					.title{
						padding: 0;
					}
					.bottoms{
						padding: 0;
					}
					.goods_img {
						width: 2.2rem;
						height: 2.2rem;
						border-radius: 0.1rem;
						img {
							margin: auto;
						}
					}
				}
				.best-more-1:nth-last-child(1)
				{
					margin-right: 0;
				}
			}
		}

		// 分享有礼
		.share {
			height: 1.6rem;
			margin: 0.2rem auto 0;
		}

		// 拼团中心
		.groups {
			margin-top: 0.2rem;
			padding: 0.3rem 0.28rem;
			border-radius: 0.1rem;
			background-color: #fff;

			// 秒杀头部
			.bests_head {
				height: 0.3rem;

				.bests_head_left {
					padding-left: 0.1rem;
					border-left: 0.04rem solid #50AD22;
					font-size: 0.24rem;
					line-height: 0.3rem;
					color: #999;

					img {
						width: 1.3rem;
						height: 0.3rem;
					}
				}

				.more {
					font-size: 0.24rem;
					line-height: 0.3rem;
					color: #666;
				}
			}

			// 拼团商品列表
			.group-lists {
				margin-top: 0.1rem;

				.group-list {
					margin-top: 0.2rem;
					padding: 0.2rem;
					border-radius: 0.1rem;
					border: 1px solid #f5f5f5;

					.group-img {
						width: 2.1rem;
						height: 2.1rem;
						border-radius: 0.1rem;
						overflow: hidden;

						img {
							margin: auto;
						}
					}

					.goods-infos {
						margin-left: 0.2rem;

						.title {
							font-size: 0.26rem;
							line-height: 150%;
							color: #333;
						}

						.group-info {
							height: 0.36rem;
							margin-right: auto;
							border-radius: 0.18rem;
							border: 0.01rem solid #50AD22;
							font-size: 0.2rem;
							line-height: 0.34rem;
							overflow: hidden;

							.type {
								padding: 0 0.16rem;
								background-color: #50AD22;
							}

							.sales {
								padding: 0 0.16rem;
								color: #999;
							}
						}

						.goods-fix {
							font-size: 0.28rem;
							line-height: 120%;

							.price {
								margin-top: auto;
								color: #EE1C1A;

								span {
									margin-left: 0.12rem;
									font-size: 0.22rem;
									color: #999;
									text-decoration: line-through;
								}
							}

							.btn {
								width: 1.2rem;
								height: 0.5rem;
								border-radius: 0.25rem;
								background-color: #50AD22;
								line-height: 0.5rem;
							}
						}
					}
				}
			}
		}

		// 秒杀
		.seckill {
			-webkit-overflow-scrolling : touch;
			.bests_head_left {
				span {
					margin-left: 0.08rem !important;
				}

				.cut-down {
					margin-left: 0.24rem;
					font-size: 0.24rem;
					line-height: 120%;
					color: #333;

					.time {
						margin: 0 0.06rem;
						padding: 0.04rem;
						border-radius: 0.04rem;
						font-size: 0.22rem;
						color: #fff;
						background-color: #888;
					}
				}
			}
		}

		// 当季热卖
		.hot_title {
			height: 0.88rem;

			img {
				height: 0.48rem;
				margin: auto;
			}
		}

		// 热卖商品
		.goods_lists {
			height: 100%;
			margin-top: 0.2rem;
			padding: 0 0.28rem;
			overflow-y: visible;
			.goods-list {
				width: calc((100% - 0.2rem) / 2);
				margin: 0 0.2rem 0.2rem 0;
				padding: 0.2rem 0.2rem 0.3rem;
				border-radius: 0.1rem;
				background-color: #fff;

				.goods-img {
					width: 2.9rem;
					height: 2.9rem;
					margin: 0 auto;
					border-radius: 0.1rem;
					border: 0.01rem solid #f5f5f5;
					overflow: hidden;

					.goods_img {
						margin: auto;
					}
				}

				.goods-info {
					margin-top: 0.2rem;
					font-size: 0.28rem;
					line-height: 120%;
					color: #333;

					.title {
						line-height: 150%;
					}

					.goods-fix {
						margin-top: 0.2rem;
						font-size: 0.34rem;
						color: #EE1C1A;

						.sales {
							// width: 1.3rem;
							height: 0.4rem;
							font-size: 0.2rem;
							line-height: 0.4rem;
							color: #EE1C1A;
							border-radius: 0.1rem;
							background-color: #FFF6F6;
						}

						.price {
							span {
								font-size: 0.22rem;
								line-height: 120%;
								color: #666;
							}
						}

						img {
							width: 0.46rem;
							height: 0.46rem;
							margin: auto 0;
							border-radius: 100%;
						}
					}
				}
			}

			.goods-list:nth-child(2n) {
				margin-right: 0;
			}
		}

		// 空列表
		.empty_box {
			height: calc(100vh - 2.74rem);

			img {
				width: 3.16rem;
				height: 2.1rem;
			}

			.note {
				margin-top: 0.3rem;
				font-size: 0.32rem;
				line-height: 120%;
				color: #666;
			}
		}
	}
</style>
<style lang="less" scoped>
	/deep/.van-tab {
		font-size: 0.3rem;
		margin: 0 0.1rem;
	}

	/deep/.van-tab--active {
		font-weight: bold;
	}

	/deep/.van-tabs__wrap {
		height: 0.88rem;
	}
	.my-ad-window /deep/ .van-overlay{
		background-color: rgba(0,0,0,.2);
	}

</style>
